<template>
  <div class="container-fluid">
    <div class="row mga padds">
      <div class="col">
        <div class="container-fluid">
          <h3 class="h3 row">软件下载</h3>
          <div class="row color-btn">
            <ul class="nav">
              <li class="nav-item">
                <span class="nav-link b-btn" :class="active == 1?'active':''" @click="active=1">浏览器</span>
              </li>
              <li class="nav-item">
                <span
                  class="nav-link b-btn"
                  :class="active == 2?'active':''"
                  @click="active=2"
                >Scratch</span>
              </li>
              <li class="nav-item b-btn">
                <span class="nav-link" :class="active == 3?'active':''" @click="active=3">Arduino</span>
              </li>
              <li class="nav-item b-btn">
                <span class="nav-link" :class="active == 4?'active':''" @click="active=4">Python</span>
              </li>
              <li class="nav-item b-btn">
                <span class="nav-link" :class="active == 5?'active':''" @click="active=5">Micro:bit</span>
              </li>
              <li class="nav-item">
                <span class="nav-link b-btn" :class="active == 6?'active':''" @click="active=6">工具</span>
              </li>
            </ul>
          </div>
          <div class="row">
            <div class="col">
              <div class="col-20" v-show="active == 1 ">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="https://www.google.cn/chrome/static/images/chrome-logo.svg"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>谷歌浏览器</h5>
                  <p class="mac-os-x-10-9-windows-7">我们推荐您使用谷歌浏览器，它目前速度最快，上课最稳定的浏览器，大名鼎鼎的谷歌公司开发的浏览器。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    <a
                      href="https://www.google.cn/chrome/"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                      target="_blank"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 2 && ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="http://doubaobit.oss-cn-beijing.aliyuncs.com/scratch/.icon-ico/icon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>Scratch桌面版</h5>
                  <p
                    class="mac-os-x-10-9-windows-7"
                  >Scratch桌面版是一款基于Scratch3.0开发的青少年编程软件，支持arduino、Doubao控制器等各种开源硬件，只需要拖动图形化程序块即可完成编程。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V{{ scratch.version}} &nbsp;&nbsp; {{ parseInt( scratch.size/1024/1024)}}M &nbsp;&nbsp; {{ scratch.releaseDate }}
                    <a
                      :href="scratch.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 2 && ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="https://doubaobit.oss-cn-beijing.aliyuncs.com/scratch2/favicon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>Scratch2.0</h5>
                  <p
                    class="mac-os-x-10-9-windows-7"
                  >Scratch2.0</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    <a
                      href="https://doubaobit.oss-cn-beijing.aliyuncs.com/scratch2/Scratch-2.exe"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 2 && !ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="http://doubaobit.oss-cn-beijing.aliyuncs.com/scratch/.icon-ico/icon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>Scratch Mac桌面版</h5>
                  <p
                    class="mac-os-x-10-9-windows-7"
                  >Scratch Mac桌面版是一款基于Scratch3.0开发的青少年编程软件，支持arduino、Doubao控制器等各种开源硬件，只需要拖动图形化程序块即可完成编程。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V{{ scratchmac.version}} &nbsp;&nbsp; {{ parseInt( scratchmac.size/1024/1024)}}M &nbsp;&nbsp; {{ scratchmac.releaseDate }}
                    <a
                      :href="scratchmac.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 5  && ismac">
                <div class="pull-left pull-img">
                  <img
                    class="img-fluid"
                    src="http://doubaobit.oss-cn-beijing.aliyuncs.com/forTest/icon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>micro:bit离线版</h5>
                  <p
                    class="mac-os-x-10-9-windows-7"
                  >你知道可以用积木块、JavaScript和Python为BBC micro:bit编程吗? 如果你还从未用过BBC micro:bit,试试我们的快速入门指南.MakeCode编辑器</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V{{ makecode.version}} &nbsp;&nbsp; {{ parseInt( makecode.size/1024/1024)}}M &nbsp;&nbsp; {{ makecode.releaseDate }}
                    <a
                      :href="makecode.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>

              <div class="col-20" v-show="active == 5 && !ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="http://doubaobit.oss-cn-beijing.aliyuncs.com/scratch/.icon-ico/icon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>micro:bit Mac 桌面版</h5>
                  <p
                    class="mac-os-x-10-9-windows-7"
                  >你知道可以用积木块、JavaScript和Python为BBC micro:bit编程吗? 如果你还从未用过BBC micro:bit,试试我们的快速入门指南.MakeCode编辑器</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V{{ makecodemac.version}} &nbsp;&nbsp; {{ parseInt( makecodemac.size/1024/1024)}}M &nbsp;&nbsp; {{ makecodemac.releaseDate }}
                    <a
                      :href="makecodemac.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>

              <div class="col-20" v-show="active == 6 && ismac">
                <div class="pull-left pull-img">
                  <img width="100%" src="https://cnd.hterobot.com/vue/public/images/qudong.png" alt />
                </div>
                <div class="pull-left pull-text">
                  <h5>Arduino 驱动程序</h5>
                  <p class="mac-os-x-10-9-windows-7">Arduino 驱动程序是ch340 是USB转串口程序。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V 1.0.0 &nbsp;&nbsp; 1M &nbsp;&nbsp; 2019-03-14T09:50:28.462Z
                    <a
                      href="https://doubaobit.oss-cn-beijing.aliyuncs.com/drivers/wch_ch32.exe"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 2 && ismac">
                <div class="pull-left pull-img">
                  <img width="100%" src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/20190920081931702_easyicon_net_256.ico" alt />
                </div>
                <div class="pull-left pull-text">
                  <h5>Scratchjr</h5>
                  <p class="mac-os-x-10-9-windows-7">ScratchJr是一个入门级的编程语言，5-7岁的孩子可以使用它创建自己的互动故事和游戏。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                     V{{ scratchjr.version}} &nbsp;&nbsp; {{ parseInt( scratchjr.size/1024/1024)}}M &nbsp;&nbsp; {{ scratchjr.releaseDate }}
                    <a
                      :href="scratchjr.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 6 && ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/icon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>机械手</h5>
                  <p class="mac-os-x-10-9-windows-7"></p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V{{ jixieshou.version}} &nbsp;&nbsp; {{ parseInt( jixieshou.size/1024/1024)}}M &nbsp;&nbsp; {{ jixieshou.releaseDate }}
                    <a
                      :href="jixieshou.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 6 && !ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/icon.ico"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>机械手 mac</h5>
                  <p class="mac-os-x-10-9-windows-7"></p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V{{ jixieshoumac.version}} &nbsp;&nbsp; {{ parseInt( jixieshoumac.size/1024/1024)}}M &nbsp;&nbsp; {{ jixieshoumac.releaseDate }}
                    <a
                      :href="jixieshoumac.url"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 6 && ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/leapmotion.png"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>leapmotion</h5>
                  <p class="mac-os-x-10-9-windows-7">Leap Motion是面向PC以及Mac的体感控制器.</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V 1.0.0 &nbsp;&nbsp; 447M &nbsp;&nbsp; 2019-05-29T16:07:28.462Z
                    <a
                      href="https://doubaobit.oss-cn-beijing.aliyuncs.com/leapmotion/Leap_Motion_Orion_Setup_win_3.2.1.exe"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 6 && !ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/leapmotion.png"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>leapmotion</h5>
                  <p class="mac-os-x-10-9-windows-7">Leap Motion是面向PC以及Mac的体感控制器.</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V 1.0.0 &nbsp;&nbsp; 447M &nbsp;&nbsp; 2019-05-29T16:07:28.462Z
                    <a
                      href="https://doubaobit.oss-cn-beijing.aliyuncs.com/leapmotion:mac/Leap_Motion_Setup_Mac_2.3.1.dmg"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 3 && ismac">
                <div class="pull-left pull-img">
                  <img
                    width="100%"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/common_45_icon.jpg"
                    alt
                  />
                </div>
                <div class="pull-left pull-text">
                  <h5>Arduino</h5>
                  <p
                    class="mac-os-x-10-9-windows-7"
                  >Arduino基于Processing IDE开发，是Arduino官方推出的一个集成开发环境。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V 1.0.0 &nbsp;&nbsp; 105M &nbsp;&nbsp; 2019-05-29T09:50:28.462Z
                    <a
                      href="https://doubaobit.oss-cn-beijing.aliyuncs.com/arduino/arduino-1.8.9-windows.exe"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>

              <div class="col-20" v-show="active == 6 && !ismac">
                <div class="pull-left pull-img">
                  <img width="100%" src="https://cnd.hterobot.com/vue/public/images/qudong.png" alt />
                </div>
                <div class="pull-left pull-text">
                  <h5>Arduino 驱动程序</h5>
                  <p class="mac-os-x-10-9-windows-7">Arduino 驱动程序是ch340 是USB转串口程序。</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    V 1.0.0 &nbsp;&nbsp; 1M &nbsp;&nbsp; 2019-03-14T09:50:28.462Z
                    <a
                      href="http://doubaobit.oss-cn-beijing.aliyuncs.com/drivers/CH34x_Install_V1.4.pkg"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="col-20" v-show="active == 4">
                <div class="pull-left pull-img">
                  <img width="100%" src="https://www.python.org/static/favicon.ico" alt />
                </div>
                <div class="pull-left pull-text">
                  <h5>Python</h5>
                  <p class="mac-os-x-10-9-windows-7">Python is a programming language that lets you work quickly and integrate systems more effectively.</p>
                  <p class="v-1-6-1-60-m-2018-10-23">
                    <a
                      href="https://www.python.org/downloads/"
                      target="_blank"
                      class="btn-22"
                      style="float: right; padding: 3px 0"
                      type="text"
                    >立即下载</a>
                  </p>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "jquery";
export default {
  data() {
    return {
      active: 2,
      makecode: {},
      makecodemac: {},
      scratch: {},
      scratchmac: {},
      jixieshou: {},
      jixieshoumac: {},
      scratchjr: {},
      ismac: false
    };
  },
  async mounted() {
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf("windows") != -1) {
      this.ismac = true;
    }
    this.makecode = await get("/download/forTest/0");
    this.scratch = await get("/download/scratch/0");
    this.scratchmac = await get("/download/scratch/mac");
    this.makecodemac = await get("/download/forTest/mac");
    this.jixieshou = await get("/download/source/0");
    this.scratchjr = await get("/download/scratchjr/0");
    console.log(this.scratchjr)
    this.jixieshoumac = await get("/download/leapMac/mac");
  },
  methods: {}
};
</script>

<style scoped>
.h3 {
  height: 18px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #2f81f1;
}
.mga {
  background-color: #ffffff;
  box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 20px;
  min-height: 200px;
  font-family: MicrosoftYaHei-Bold;
}
.b-btn {
  font-family: MicrosoftYaHeiLight;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
}
.color-btn {
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  color: #333333;
  line-height: 35px;
  margin-top: 15px;
  margin-bottom: 30px;
}
.col-20 {
  height: 132px;
  background-color: #f6f6f6;
  border-radius: 4px;
  padding: 9px 20px;
  margin-bottom: 35px;
}
.col-20 .pull-img {
  width: 113px;
  height: 113px;
  border-radius: 4px;
}
.pull-text {
  margin-left: 20px;
  width: 587px;
}
.pull-text h5 {
  height: 14px;
  font-family: MicrosoftYaHei-Bold;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #333333;
}
.mac-os-x-10-9-windows-7 {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 21px;
  letter-spacing: 1px;
  color: #666666;
  margin-top: 17px;
}
.v-1-6-1-60-m-2018-10-23 {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 28px;
  letter-spacing: 1px;
  color: #666666;
}
.btn-22 {
  width: 112px;
  height: 27px;
  background-color: #2f81f1;
  border-radius: 14px;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  line-height: 20px;
}
.active {
  color: #2f81f1;
}
.nav-link {
  cursor: pointer;
}
</style>
